<template>
    <div id="member">
        <el-col :span="24" class="action-bar">
            <el-button type="primary" size="medium" @click="setMeal('')">添加</el-button>
        </el-col>
        

        <!-- 列表 -->
        <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
                prop="name"
                label="套餐名称"
                width="120"
                >
            </el-table-column>
            <el-table-column
                prop="keep_time"
                label="收费周期(月)"
                width="100"
                >
            </el-table-column>
            
            <el-table-column
                prop="free"
                label="价格"
                width="100"
                >
            </el-table-column>
            <!-- <el-table-column
                prop="clinch_num"
                label="成交量"
                width="100"
                >
            </el-table-column> -->
            <el-table-column
                prop="is_use"
                label="用户使用中"
                width="100"
                >
                <template slot-scope="scope" >
                    <div>
                        <el-tag type="info" v-show="scope.row.is_use==0">否</el-tag>
                        <el-tag type="success" v-show="scope.row.is_use==1">是</el-tag>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                label="套餐状态"
                width="100"
                >
                <template slot-scope="scope">
                    <div>
                        <el-switch
                        style="display: block;margin:20px 0;width:200px"
                        v-model="scope.row.status"
                        @change="switchShowStatus($event,scope)"
                        active-color="#13ce66"
                        active-value="1"
                        inactive-value="0"
                        >
                        </el-switch>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                prop="sort"
                label="排序"
                width="100"
                >
            </el-table-column>
            <el-table-column
                prop="created_at"
                label="创建时间"
                show-overflow-tooltip
                width="150"
                >
            </el-table-column>
            
            <el-table-column label="操作" width='300'>
                <template slot-scope="scope">
                    <el-button size="mini" type='primary' @click="toBandCompany(scope.row.id)">绑定会员单位</el-button>
                    <el-button size="mini" type='primary' @click="setMeal(scope.row.id)">编辑</el-button>
                    <el-button size="mini" type='danger' @click="deleteMealt(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
            
        </el-table>

		<el-dialog title="设置套餐" :visible.sync="signatureVisible" @close="initData" >
            <el-form :label-position="'left'" label-width="150px">
                <el-form-item label="套餐名称">
                    <el-input palceholder="套餐名称" v-model="member.name" style="width:200px"></el-input>
                </el-form-item>
                <el-form-item label="收费周期">
                    <el-radio-group v-model="member.cycle">
                    <el-radio :label="1">1个月</el-radio>
                    <el-radio :label="3">3个月</el-radio>
                    <el-radio :label="12">12个月</el-radio>
                    <el-radio :label="-1">自定义</el-radio>
                </el-radio-group>
                </el-form-item>
                <el-form-item label="自定义周期" v-if="member.cycle==-1">
                    <el-input type="number" palceholder="输入月份" v-model="member.customizeCycle" style="width:200px"></el-input>
                </el-form-item>
                <el-form-item label="价格">
                    <el-input palceholder="输入价格，单位元" v-model="member.price" style="width:200px"></el-input>
                </el-form-item>
                <el-form-item label="排序">
                    <el-input palceholder="数字越小，越靠前" v-model="member.sortNum" style="width:200px"></el-input>
                </el-form-item>
                <h1 style="fontSize:18px;padding:10px 0">请设置用户权益</h1 >
                <el-form-item :label="item.name" v-for="(item,index) of vipRuleList" :key="index">
                    <el-radio-group v-model="vipRuleList[index]['input']" v-if="item.enter_type==0">
                        <el-radio :label="1">有</el-radio>
                        <el-radio :label="0">无</el-radio>
                    </el-radio-group>
                    <el-input v-else type="number"  v-model="vipRuleList[index]['input']" style="width:200px"></el-input>
                </el-form-item>
                
            </el-form>
            <div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submit" >提交</el-button>
			</div>
		</el-dialog>
    </div>
</template>
<script>
export default {
    name:'member',
    data() {
        return {
            signatureVisible:false,//编辑弹窗
            mealId:'',//选中id
            tableData: [{status:true}],
            vipRuleList:[],//用户权益
            page:1,
            totalPage:0,
            member:{
                name:'',
                cycle:'',//月份
                customizeCycle:'',//自定义月份
                price:'',
                sortNum:''
            },
            photoImg:'',
            photoID:'',
        }
    },
    methods: {   
        async changeAgreementStatus(){
            let res=await this.$api.changeAgreementStatus()
            if(res.data.level=='success'){
                this.$message.success(res.data.message)
            }else{
                this.$message.error(res.data.message)
            }
        },   
        pageChange(e){
			//翻页
			this.page=e;
			this.getVipPackageList();
        },
        async getVipPackageList(){
            //获取会员列表
            let params={
                page:this.page,
                limit:16,
            }
            let res=await this.$api.getVipPackageList(
                params);
            if(res.data.level=='success'){
                this.tableData=res.data.data;
                this.totalPage=res.data.page_info.total;
            }
        },
        async deleteMealt(id){
            //删除套餐
            let judge=null;
            let tit='删除该套餐?';
            try {
              judge=  await this.$confirm(tit, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
                })
            } catch (error) {
                judge='cancel'
            }
            if(judge=='confirm'){
                this.delVipPackage(id)
            }
            console.log(judge)
        },
        async delVipPackage(id){
            let res=await this.$api.delVipPackage({id:id})
            if(res.data.level=='success'){
                this.$message.success(res.data.message);            
                this.getVipPackageList()
            }else{
                this.$message.error(res.data.message);
            }
        },
        async getVipRuleList(){
            //获取用户权益
            let res=await this.$api.getVipRuleList();
            if(res.data.level=='success'){
                this.vipRuleList=res.data.data.map(item=>{
                    return {...item,...{input:''}}
                });
                console.log(this.vipRuleList)
            }
        },
        async submit(){
            let vip_rule_ids=[]
            this.vipRuleList.forEach(item=>{
                if(item.input){
                    vip_rule_ids.push({id:item.id,num:item.input})
                }
            })

            let params={
                id:this.mealId,
                name:this.member.name,
                keep_time:this.member.cycle==-1?this.member.customizeCycle:this.member.cycle,
                free:this.member.price,
                sort:this.member.sortNum,
                vip_rule_ids:vip_rule_ids
            }
            let res=await this.$api.setVipPackage(params)
            if(res.data.level=='success'){
                this.$message({
                    type:'success',
                    message:res.data.message
                })
                this.getVipPackageList()
                this.signatureVisible = false
            }else{
                this.$message({
                    type:'error',
                    message:res.data.message
                })
                
            }
        },
         setMeal(id){
            //获取套餐详情
            if(id){
                this.mealId=id;
                this.getVipPackageDetail(id)
            }
            this.signatureVisible=true;
            
            
        },
        async getVipPackageDetail(id){
            let res =await this.$api.getVipPackageDetail({id:id})
            if(res.data.level=='success'){
                let data=res.data.data
                this.member.name=data.name;
                this.member.price=data.free;
                this.member.sortNum=data.sort;

                if(data.keep_time!=1 && data.keep_time!=3 && data.keep_time!=12){//区分套餐的收费周期是自定义还是选中的
                    this.member.cycle=-1;
                    this.member.customizeCycle=data.keep_time
                }else{
                    this.member.cycle=+data.keep_time
                }
                let vipRuleList=[]
                data.vip_rule_list.forEach(item=>{
                    vipRuleList.push({name:item.vip_rule_name,enter_type:item.enter_type,input:item.num,id:item.id})
                })
                this.vipRuleList=vipRuleList
            }else{
                this.$message.error(res.data.message)
            }
        },
        beforeAvatarUpload(file) {
			//上传照片前的操作
			// console.log(file,555)
		},
		handlePhoto(res, file) {
			//上传照片成功
			if(res.data){
				this.photoImg=res.data.img_url;
				this.photoId=res.data.id;
			}
        },
        async switchShowStatus($event,scope){
            let params={
                id:scope.row.id
            }
            let res=await this.$api.changeVipPackageStatus(params)
            if(res.data.level=='success'){
                this.$message({
                    type:'success',
                    message:res.data.message
                })
                
            }else{
                this.$message({
                    type:'error',
                    message:res.data.message
                })
                let is_show=$event=='1'?'0':'1'
                this.$set(this.tableData,scope.$index,{...scope.row,...{is_show:is_show}})
                
            }
        },
        toBandCompany(id){
            //绑定会员单位
            this.$router.push({name:'Meal_bind',query:{id:id}})
        },

        initData(){
            this.mealId='';
            this.member=this.$options.data().member
            this.getVipRuleList()
        }

    },
    mounted() {
        this.getVipPackageList()
        this.getVipRuleList()
    },
}
</script>
<style lang="scss" scoped>
.screen{
          margin-top: -10px !important;
      }
    .action-bar{
			background-color: #f2f2f2;
			height: 60px;
			margin: 10px 0px;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			padding-left: 20px;
			.action-bar-input{
				width: 250px;
				margin-right: 14px;
      }
      .task-form-text{
				color: #666666;
			}
		}
		.el-table-style{
			width: 100%;
			border: 1px solid #f2f2f2;
		}
		.footer-bar{
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #f2f2f2;
			padding: 8px;
			margin: 10px 0px;
			box-sizing: border-box;
		}
		.dialog-footer{
			text-align: center;
		}
		.executorList{
			display: flex;
			flex-wrap: wrap;
			div{
				margin:10px;
				border:1px solid #eee;
				border-radius: 5px;
				padding:5px 10px;
			}
		}

        .avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
		border: 1px dashed #d9d9d9;
	}
	.avatar {
		width: 178px;
		height: 178px;
		display: block;
		object-fit: contain;
	}
    .add-table-wrapper{
        display: flex;
        justify-content: center;
        padding:30px 0; 
    }
</style>
